<template>
  <div class="header">
    <div class="progress-name">
      <i class="iconfont iconlogo"></i>学科网运营管理系统
    </div>
    <div class="quick-menu">
      <a href="" class="search"><i class="iconfont iconsearch"></i></a>
      <a href="" class="message on"><i class="iconfont iconnothing"></i></a>
      <a href="" class="avatar"><img src="images/banner1.png" alt=""></a>
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .header{
    width: 100%;
    height:98px;
    padding:0 40px;
    background: #fff;
    .progress-name{
      height:100%;
      line-height: 98px;
      float:left;
      font-size: 26px;
      color: #183B56;
      .iconfont{
        margin-right: 16px;
        display: inline-block;
        vertical-align: top;
        font-size:40px;
        height:98px;
        line-height: 98px;
        color:rgba(84,104,255,1);
      }
    }
    .quick-menu{
      height:100%;
      float:right;
    }
    .search{
      height:100%;
      line-height: 98px;
      float:left;
      .iconfont{
        font-size:20px;
        color:rgba(24,59,86,1);
      }
    }
    .message{
      position: relative;
      margin-left:30px;
      float:left;
      height:100%;
      line-height: 98px;
      .iconfont{
        position: relative;
        font-size: 20px;
        color:rgba(24,59,86,1);
      }
      &.on{
        .iconfont:after{
          position: absolute;
          width:8px;
          height:8px;
          top:0;
          right:0;
          border-radius:100%;
          content:'';
          background: #FE4509;
        }
      }
    }
    .avatar{
      margin-left:30px;
      margin-top:26px;
      float:left;
      width:46px;
      height:46px;
      img{
        width:100%;
        height:100%;
        border-radius:100%;
      }
    }
  }
</style>
